<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>文章列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="icon" th:href="@{/读书1.jpg}" type="image/jpg" >
    <link rel="stylesheet" href="../static/layui-v2.5.7/layui/css/layui.css" th:href="@{/layui-v2.5.7/layui/css/layui.css}">
<!-- th:href="@{/layui-v2.5.7/layui/css/layui.css}" -->
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="../static/layui-v2.5.7/layui/layui.js" th:src="@{/layui-v2.5.7/layui/layui.js}"></script>
<!-- th:src="@{/layui-v2.5.7/layui/layui.js}" -->
</head>

<style>

    body{
        background-color: rgb(246,246,246);
        min-width: 1450px;
    }

    .head{
         position: fixed;
         width:100%;
         top:0;
         z-index:1;
    }

    .head_div1{
        width:355px;
        height: 30px;
        display: inline-block;
        /* border: 1px solid red; */
        float: right;
        margin: 15px 15px 0px 0px;
        background-color:rgb(57,61,73);
    }

    .head_div1_input1{
        height: 30px;
        width: 300px;
        border-radius: 5px 5px 5px 5px;
        border: none;
        background-color:rgb(232, 232, 232);
        float: left;
    }


    .head_div1_button{
        height: 30px;
        width: 50px;
        border-radius: 5px 5px 5px 5px;
        background-color:rgb(57,61,73);
        border: 1px solid white;
        //font-family: '楷体';
        font-size: 15px;
        line-height: 30px;
        color: white;
        float: right;
    }

    .head_div2{
        float: right;
        display: inline-block;
        margin-right: 15px;
    }

    .head a {
        //color: black !important;
    }

    .div_body{
        background-color: white;
        /* 这个白边不能去 */
        border: 1px solid white;
        margin: 75px auto 0px;
        width: 85%;
        min-height:469px;
    }
   /*  */
   .div_body_div1{
        border-bottom:1px solid rgb(232, 232, 232);
        margin: 15px auto;
        width: 95%;
        height:120px
   }

   .div_body_div1_div1{
        //border:1px solid red;
        display:inline-block;
        float:left;
        width: 10%;
        height:120px;
   }

     .div_body_div1_div1>img{
        width: 100%;
        height:100%;
   }

   .div_body_div1_div2{
        //border:1px solid red;
        display:inline-block;
        float:right;
        width: 89%;
        height:20px;
        line-height:20px;
        overflow: hidden;
        color: rgb(0,123,255);
        font-size:16px;
        //font-weight:700;
   }

   .div_body_div1_div3{
        //border:1px solid red;
        display:inline-block;
        overflow:hidden;
        float:right;
        width: 89%;
        height:50px;
        line-height:25px;
        margin-top:10px;
        margin-bottom:10px;
        font-size:16px;

   }

   .div_body_div1_div4{
        //border:1px solid red;
        display:inline-block;
        float:right;
        width: 89%;
        height:30px;
   }

   .div_body_div1_div4_div1{
        //border:1px solid red;
        display:inline-block;
        float:left;
        width:400px;
        height:30px;
        line-height:30px;
   }

   .div_body_div1_div4_div1_img{
        //border:1px solid red;
        border-radius:12.5px;
        float:left;
        width:25px;
        height:25px;
   }

   .div_body_div1_div4_div1_span1{
        color: rgb(108,117,125);
        font-size: 16px;
        margin-left:10px;
   }

   .div_body_div1_div4_div1_span2{
        color: rgb(108,117,125);
        font-size: 16px;
        margin-left:10px;
   }

   .div_body_div1_div4_div1_span3{
        color: rgb(108,117,125);
        font-size: 16px;
        margin-left:10px;
        font-weight:700;
   }

   .div_body_div1_div4_div2{
        //border:1px solid red;
        display:inline-block;
        float:right;
        width: 35px;
        height:30px;
        line-height:30px;
   }

   /* */
     .div_page{
        background-color: white;
        /*border: 1px solid red;*/
        margin:0px auto 15px;
        width: 85%;
        height:60px
    }

   /*  */
    .div_foot {
        width: 100%;
        /* border: 1px red solid; */
        height: 100px;
        background-color: rgb(57,61,73);
    }

    a {
        text-decoration: none;
    }

    .div_foot_div1 {
        /* border: red 1px solid; */
        width: 990px;
        height: 85px;
        display: inline-block;
        position: relative;
        top: 10px;
        left: 240px;
        text-align: center;
        font-size: 12px;
        line-height: 150%;
        font-family: Arial, Verdana, 宋体;
        color:white;
    }

    .div_foot_div1 div {
        margin-top: 10px;
    }

    .div_foot_div1_div1 a {
        margin: 0 10px;
        color:white;
    }

</style>

<body>

<div class="head">
    <ul class="layui-nav">

        <li class="layui-nav-item">
            <a th:href="@{/index}">
                <i class="layui-icon layui-icon-home"></i>
                首页
            </a>
        </li>

        <li class="layui-nav-item ">
            <a href="">
                <i class="layui-icon layui-icon-notice"></i>
                系统消息
            </a>
        </li>

        <li class="layui-nav-item">
            <a href="javascript:;">
                <i class="layui-icon layui-icon-read"></i>
                文章类型
            </a>
            <dl class="layui-nav-child">
                <!-- 二级菜单 -->
                <dd><a th:href="@{/list/10/1}">Java</a></dd>
                <dd><a th:href="@{/list/11/1}">C++</a></dd>
                <dd><a th:href="@{/list/12/1}">Python</a></dd>
                <dd><a th:href="@{/list/13/1}">JavaScript</a></dd>
                <dd><a th:href="@{/list/14/1}">C语言</a></dd>
                <dd><a th:href="@{/list/15/1}">云计算</a></dd>
            </dl>
        </li>

        <li class="layui-nav-item">
            <a th:href="@{/post}">
                <i class="layui-icon layui-icon-chat"></i>
                论坛
            </a>
        </li>

        <div class="head_div1">
            <form action="/ImagineCommunity/blogSearchList" method="get">
                <input class="head_div1_input1" name="title" placeholder="&nbsp 输 入 你 想 看 的 文 章 话 题">
                <button class="head_div1_button"><i class="layui-icon layui-icon-search" style="font-size: 25px;"></i></button>
            </form>

        </div>

        <div class="head_div2">

            <li class="layui-nav-item layui-this">
                <a>
                    <i class="layui-icon layui-icon-read"></i>
                    <span th:text="${blogListType}"></span>
                </a>
            </li>

            <li class="layui-nav-item">
                <a th:href="@{/friends}">
                    <i class="layui-icon layui-icon-friends"></i>
                    好友列表
                </a>
            </li>

            <li class="layui-nav-item">
                <a><img th:src="${session.user.headImg}" class="layui-nav-img"><span th:text="${session.user.username}">2</span></a>
                <dl class="layui-nav-child">
                    <dd>
                        <a th:href="@{/personalInformation}">
                            <i class="layui-icon layui-icon-chat"></i>
                            个人信息
                        </a>
                    </dd>

                    <dd>
                        <a th:href="@{/outLogin(id = ${session.user.id})}">
                            <i class="layui-icon layui-icon-logout"></i>
                            退了
                        </a>
                    </dd>

                </dl>
            </li>

        </div>
    </ul>

</div>

<div class="div_body">

    <div class="div_body_div1" th:each="blog:${page.items}">
        <a th:href="@{/blogDetails(id=${blog.id})}">
            <div class="div_body_div1_div1"><img th:src="${blog.filePath}"></div>
            <div class="div_body_div1_div2" th:utext="${blog.title}">Java常用注解(Annotation)详解汇总</div>
        </a>

        <div class="div_body_div1_div3" th:utext="${blog.content}">
            内容呀
        </div>

        <div class="div_body_div1_div4">
            <div class="div_body_div1_div4_div1">
                <img th:src="${blog.headImg}" class="div_body_div1_div4_div1_img">
                <span th:utext="${blog.userName}" class="div_body_div1_div4_div1_span1">吴志伟</span>
                <span class="div_body_div1_div4_div1_span2">发布于</span>
                <span class="div_body_div1_div4_div1_span3" th:utext="${blog.createTime}">2019-04-15 15:32:18</span>
            </div>
            <div class="div_body_div1_div4_div2">
                <i class="layui-icon layui-icon-praise" id="praise" style="font-size: 20px; color:rgb(232, 232, 232);"></i>
                <input type="hidden" th:value="${blog.id}">
                <span style="position:relative;bottom:3px;left:3px;" th:text="${blog.praise}">12</span>
            </div>
        </div>
    </div>

</div>

<div class="div_page">

        <div id="demo1" style="float:right;"></div>

</div>

<!-- 底部相同部分 -->
<div th:replace="foot::#foot"></div>

</body>

<!--  -->
<script th:inline="javascript">
    <!-- layui -->
    layui.use('element', function () {
        var element = layui.element;
    });
    <!-- 页码 -->
    layui.use('laypage',function() {
        var laypage = layui.laypage;

        var pageCountTotal = [[${page.pageCountTotal}]];//获取总数
		var pageNo = [[${page.pageNo}]] ;//获取页码
		var pageSize = 10;//获取每页几个
		var type = [[${type}]];

        //执行一个laypage实例
        laypage.render({
            elem : 'demo1', //注意，这里的 test1 是 ID，不用加 # 号

			count : pageCountTotal,//数据总数
			limit : pageSize,//一页多少条
			curr : pageNo,//页码

            jump : function(obj, first) {
            console
                if (!first) {
                    $.ajax({
                        url : '/ImagineCommunity/articleList',
                        data : {pageNo : obj.curr,
                                type : type,
                        },
                        success : function(res) {
                            console.log("页码："+res.pageNo);
                            console.log("类型："+res.type);
                            window.location.href = "/ImagineCommunity/lookArticleList/" + res.type + "/"+res.pageNo;
                        }
                    })
                    return false;
                }
            }
        });
    });

    $(function(){
         <!-- 点赞 -->
        $(".div_body_div1_div4_div2>i").click(function(){
            var blogId = $(this).parent().find("input").val();
            var userId = [[${session.user.id}]];
            var thisClick = $(this);
            layui.use('layer', function () {
                $.ajax({
                    url : '/ImagineCommunity/praiseBlog',
                    data : {blogId : blogId,
                            userId : userId,
                    },
                    success : function(res) {
                        console.log(res.msg);
                        if(res.msg == "yes"){
                            layer.msg("点赞成功!")
                            var value = $(thisClick).parent().find('span').text();
                            var num = parseInt(value) + 1;
                            $(thisClick).parent().find('span').text(num);
                        }
                        if(res.msg == "no"){
                            layer.msg("点赞已取消!")
                            var value = $(thisClick).parent().find('span').text();
                            var num = parseInt(value) - 1;
                            $(thisClick).parent().find('span').text(num);
                        }
                    }
                })
            });
        })
    });

    <!-- 浏览器关闭事件,浏览器关闭时向后台发送退出链接 -->
    $(window).unload(function(){
        $.ajax({
            url : "/ImagineCommunity/outLogin?id=[[${session.user.id}]]",
        })
    });

</script>

</html>